<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import Api from "@/api";
import iconReyuyanNormal from './images/icon-热源-normal.svg';
import iconReyuyanError from './images/icon-热源-error.svg';
export default defineComponent({
  name: "SectionFour",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      iconReyuyanNormal: iconReyuyanNormal,
      iconReyuyanError: iconReyuyanError,
      data_5: 19,
      data_6: 0,
      data_7: 427,
      data_8: 0
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      return
      //   检修井
      Api.getDataOfJXJ({
        ids: [],
        fields: []
      }).then(res => {
        this.data_7 = res.features.length;
      })
      //   阀门
      Api.getDataOfFAMEN({
        ids: [],
        fields: []
      }).then(res => {
        this.data_8 = res.features.length;
      })

      //   供热户数 需要求和
      //   供热居民户数
      let p1 = Api.getDataOfHRZAnalize({
        fieldName: 'grjmhs'
      });
      // 服务非居民户数
      let p2 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmhs'
      });
      Promise.all([p1, p2]).then(res => {
        this.data_5 = parseInt(res.reduce((a, b) => { return a + b }, 0))
      })

      //   供热面积 需要求和

      //   居民供热面积 需要求和
      let p3 = Api.getDataOfHRZAnalize({
        fieldName: 'jmgrmj'
      });
      //   服务非居民供热面积
      let p4 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmgrmj'
      });
      Promise.all([p3, p4]).then(res => {
        this.data_6 = parseInt(res.reduce((a, b) => { return a + b }, 0))
      })
    }
  }
});
</script>
<template>
  <div class="section-one">
    <GlobalCard :mainTitle="'站点运行状态'">
      <template #body>
        <!-- 代码 -->
        <div id="Gongreyujing">
          <div class="inner">
            <div class="item dou">
              <div class="numb">
                <span class="data small-size data-3 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_5" :duration="3000" :autoplay="true" />
                </span>
                <span class="unit "></span>
              </div>
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyanNormal" />
                <span>热源正常</span>
              </div>
            </div>

            <div class="item error dou">
              <div class="numb">
                <span class="data small-size data-4 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_6" :duration="3000" :autoplay="true" />
                </span>
                <span class="unit "></span>
              </div>
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyanError" />
                <span>热源异常</span>
              </div>
            </div>

            <div class="item dou">
              <div class="numb">
              <span class="data data-3 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_7" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "></span>
              </div>
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyanNormal" />
                <span>换热站正常</span>
              </div>
            </div>

            <div class="item error dou">
              <div class="numb">
                <span class="data data-4 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_8" :duration="3000" :autoplay="true" />
                </span>
                <span class="unit "></span>
              </div>
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyanError" />
                <span>换热站异常</span>
              </div>
            </div>
          </div>
          <div class="mask" />
        </div>

      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-one {
  position: fixed;
  top: 11rem;
  //left: 2rem;
  right: 44rem;
  height: 18rem;
}

#Gongreyujing {
  position: relative;
  &>.inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    &>.item {
      font-size: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url(images/item-bg-normal.svg);
      background-repeat: no-repeat;
      background-color: rgba(30, 100, 190, .3);
      transition: all .3s;
      margin-bottom: .2rem;
      height: 7rem;
      &.error {
        background-image: url(images/item-bg-error.svg);
        background-color: rgba(69, 25, 25, .5);
        &:hover {
          background-color: rgba(69, 25, 25, .9);
        }
      }
      &.tri {
        width: 33%;
      }
      &.dou {
        width: 49.5%;
      }
      &:hover {
        background-color: rgba(30, 100, 190, .5);
      }

      &>.numb {
        margin-top: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 3rem;

        &>span.data {
          font-size: 2.5rem;
          font-weight: bolder;
          &.small-size {
            //font-size: 1.5rem;
          }

          &.data-2 {
            color: #168cff;
          }

          &.data-3 {
            color: #34a739;
          }

          &.data-4 {
            color: #cb5f5f;
          }
        }

        &>span.unit {
          margin-top: 3px;
          margin-left: .5rem;
          font-size: 1.5rem;
        }
      }

      &>.name {
        margin-top: .5rem;
        font-size: 1.5rem;
        line-height: 2rem;
        font-family: "alimamashuheiti" !important;
        display: flex;
        align-items: center;
        &>.icon {
          width: 2rem;
          height: 2rem;
        }
        &>span {
          margin-left: .5rem;
        }
      }
    }
  }
}

</style>